<template>
	<view>
		<!-- 头部 -->
		<yHeader :current='2' @Tabs="handleTabs"></yHeader>
		<!-- 内容 -->
		<view class="__inner py-4">
			<!-- 地址 -->
			<view class="flex flex-column w-100 mb-4">
				<!-- 标头 -->
				<view class="flex-shrink bg-lightbrown mb-2" style="height: 88rpx;">
					<view class="flex justify-center align-center bg-white shadow border-top box"
						:class="'border-'+ThemeColors" style="width: 272rpx;height: 100%;">
						<text class="font ">确认收货地址</text>
					</view>
				</view>
				<view class="flex justify-center">
					<view class="my-2 border-right border-grey pr-10 mr-10"
						style="border-right-style: dashed; width: 40%;">
						<view class="w-100 flex align-center border-bottom border-grey" style="height: 150rpx;">
							<view class="flex justify-end " style="width: 20%;">
								<text class="font">收货人：</text>
							</view>
							<view style="width: 80%;">
								<el-input style="width: 80%;" v-model.trim="form.Buyer_Contact"
									placeholder="请输入收货人"></el-input>
							</view>
						</view>
						<view class="w-100 flex align-center" style="height: 150rpx;">
							<view class="flex justify-end" style="width: 20%;">
								<text class="font">手机号：</text>
							</view>
							<view style="width: 80%;">
								<el-input style="width: 80%;" v-model.trim="form.Buyer_Contact_Phone"
									placeholder="请输入手机号"></el-input>
							</view>
						</view>
					</view>
					<view class="my-2" style="width: 40%;">
						<view class="w-100 flex align-center border-bottom border-grey" style="height: 150rpx;">
							<view class="flex justify-end" style="width: 20%;">
								<text class="font">地址：</text>
							</view>
							<view style="width: 80%;">
								<el-cascader v-model="address" style="width: 80%;" :options="Address" :props="{
								    expandTrigger: 'hover',
								    label: 'text',
								    value: 'text',
								    children: 'children',
								  }"></el-cascader>
							</view>
						</view>
						<view class="w-100 flex align-center" style="height: 150rpx;">
							<view class="flex justify-end" style="width: 20%;">
								<text class="font">详情地址：</text>
							</view>
							<view style="width: 80%;">
								<el-input style="width: 80%;" v-model.trim="addressDetail"
									placeholder="请输入详情地址"></el-input>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column w-100 mb-4">
				<!-- 标头 -->
				<view class="flex-shrink bg-lightbrown mb-2" style="height: 88rpx;">
					<view class="flex justify-center align-center bg-white shadow border-top box"
						:class="'border-'+ThemeColors" style="width: 272rpx;height: 100%;">
						<text class="font ">选择交收方式</text>
					</view>
				</view>
				<view class="flex justify-center">
					<view class="my-2 border-right border-grey pr-10 mr-10"
						style="border-right-style: dashed; width: 40%;">
						<view class="w-100 flex align-center border-bottom border-grey" style="height: 150rpx;">
							<view class="flex justify-end " style="width: 20%;">
								<text class="font">打款方式：</text>
							</view>
							<view style="width: 80%;">
								<el-select v-model="form.Payment_SerialNumber" clearable placeholder="请选择">
									<el-option v-for="item in Data.Payment" :key="item.Payment_SerialNumber"
										:label="item.Payment_Name" :value="item.Payment_SerialNumber">
									</el-option>
								</el-select>
							</view>
						</view>
						<view class="w-100 flex align-center" style="height: 150rpx;">
							<view class="flex justify-end" style="width: 20%;">
								<text class="font">装运方式：</text>
							</view>
							<view style="width: 80%;">
								<el-select v-model="form.Shipment_SerialNumber" clearable placeholder="请选择">
									<el-option v-for="item in Data.Shipment" :key="item.Shipment_SerialNumber"
										:label="item.Shipment_Name" :value="item.Shipment_SerialNumber">
									</el-option>
								</el-select>
							</view>
						</view>
					</view>
					<view class="my-2" style="width: 40%;">
						<view class="w-100 flex align-center border-bottom border-grey" style="height: 150rpx;">
							<view class="flex justify-end" style="width: 20%;">
								<text class="font">运输方式：</text>
							</view>
							<view style="width: 80%;">
								<el-select v-model="form.Transport_SerialNumber" clearable placeholder="请选择">
									<el-option v-for="item in Data.Transport" :key="item.value"
										:label="item.Transport_Name" :value="item.Transport_SerialNumber">
									</el-option>
								</el-select>
							</view>
						</view>
						<view class="w-100 flex align-center" style="height: 150rpx;">
							<view class="flex justify-end" style="width: 20%;">
								<text class="font">付款方式：</text>
							</view>
							<view style="width: 80%;">
								<el-input :disabled="true" style="width: 80%;" v-model.trim="Goods.Trading_Name"
									placeholder="请输入付款方式"></el-input>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column w-100 mb-4">
				<!-- 标头 -->
				<view class="flex-shrink bg-lightbrown mb-2" style="height: 88rpx;">
					<view class="flex justify-center align-center bg-white shadow border-top box"
						:class="'border-'+ThemeColors" style="width: 272rpx;height: 100%;">
						<text class="font ">付款周期细则</text>
					</view>
				</view>
				<view class="flex justify-center">
					<view style="border: 2rpx solid #eee;width: 100%;">
						<el-table :data="Data.Paystages" style="width: 100%">
							<el-table-column align="center" prop="Trading_Explain" label="分期付款阶段名称">
							</el-table-column>
							<el-table-column align="center" prop="Trading_Amount" label="分期付款额度(%)">
							</el-table-column>
							<el-table-column align="center" label="最晚分期付款时间">
								<template v-slot="{row}">
									<text>{{row.Trading_Detail_Name}}{{row.Trading_Date}}天后</text>
								</template>
							</el-table-column>
						</el-table>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="flex flex-column w-100 mb-4">
				<!-- 标头 -->
				<view class="flex-shrink bg-lightbrown mb-2" style="height: 88rpx;">
					<view class="flex justify-center align-center bg-white shadow border-top box"
						:class="'border-'+ThemeColors" style="width: 272rpx;height: 100%;">
						<text class="font ">订单信息</text>
					</view>
				</view>
				<!-- 卖家 -->
				<view class="flex align-center my-2 border border-grey " style="box-sizing: border-box; height: 70rpx;">
					<text class="font ml-2">卖家：{{Goods.Enterprise_Name}}</text>
				</view>
				<!-- 货品信息 -->
				<view class="flex flex-column border border-grey " style="box-sizing: border-box;">
					<view class="flex align-center bg-lightbrown w-100" style="height: 70rpx;">
						<view style="width: 30%;">
							<text class="ml-2 font">货品信息</text>
						</view>
						<view class="flex justify-center" style="width: 14%;">
							<text class="font">单价（元）</text>
						</view>
						<view class="flex justify-center" style="width: 14%;">
							<text class="font">数量</text>
						</view>
						<view class="flex justify-center" style="width: 14%;">
							<text class="font">优惠</text>
						</view>
						<view class="flex justify-center" style="width: 14%;">
							<text class="font">金额（元）</text>
						</view>
						<view class="flex justify-center" style="width: 14%;">
							<text class="font">运费（元）</text>
						</view>
					</view>
					<!-- 表体 -->
					<view class="flex align-center w-100 border-bottom border-grey"
						style="box-sizing: border-box; height: 200rpx;">
						<view class="flex align-start" style="width: 30%;">
							<image class="ml-2" style="width: 120rpx;height: 120rpx;"
								:src="Domain_IMG+Goods.Picture_URL" mode=""></image>
							<text class="font ml-2">{{Goods.Article_Name}}</text>
						</view>
						<view class="flex align-start justify-center" style="height: 120rpx; width: 14%;">
							<text class="font">{{Goods.Amount}}</text>
						</view>
						<view class="flex justify-center" style="height: 120rpx; width: 14%;">
							<el-input-number :disabled="true" size="small" v-model="Quantity"
								style="width: 250rpx;"></el-input-number>
						</view>
						<view class="flex justify-center" style="height: 120rpx; width: 14%;">
							<text class="font">-</text>
						</view>
						<view class="flex justify-center" style="height: 120rpx; width: 14%;">
							<text class="font">{{(Number(Goods.Amount)*Number(Quantity)).toFixed(2)}}元</text>
						</view>
						<view class="flex justify-center" style="height: 120rpx; width: 14%;">
							<text class="font">运费待协商</text>
						</view>
					</view>
					<!-- 给卖家留言 -->
					<view class="flex align-center w-100 border-bottom border-grey" style="box-sizing: border-box;">
						<view class="mt-2 mb-4 flex align-start w-100">
							<text class="font ml-2">给卖家留言</text>
							<textarea class="border border-grey ml-2 px-2 py-1"
								style=" box-sizing: border-box; height: 160rpx;"
								placeholder-class="font text-hover-light" placeholder="可以告诉卖家您的其他需求"></textarea>
						</view>
					</view>
				</view>
			</view>
			<!-- 交易方式 -->
			<view class="flex flex-column w-100 mb-4">
				<!-- 标头 -->
				<view class="flex-shrink bg-lightbrown mb-2" style="height: 88rpx;">
					<view class="flex justify-center align-center bg-white shadow border-top box"
						:class="'border-'+ThemeColors" style="width: 272rpx;height: 100%;">
						<text class="font ">交易方式</text>
					</view>
				</view>
				<!-- 交易方式 -->
				<view class="mb-4">
					<view class="border flex align-center justify-center" :class="'border-'+ThemeColors"
						style="width:400rpx; height: 100rpx;">
						<text class="font">担保交易</text>
					</view>
				</view>
				<!-- 金额计算 -->
				<view class="mb-4">
					<view class="px-5 bg-lightbrown border" :class="'border-'+ThemeColors"
						style="box-sizing: border-box; height: 300rpx;">
						<view class="flex align-center justify-end border-bottom border-grey w-100"
							style="box-sizing: border-box; height: 120rpx;">
							<text class="font-md">货品总金额：{{Goods.Amount * Quantity}}.00元</text>
						</view>
						<view class="flex align-center justify-end w-100" style="height: 170rpx;">
							<text class="font-lg">应付总金额：<text class="h2"
									:class="'text-'+ThemeColors">{{Goods.Amount * Quantity}}.00</text>元</text>
						</view>
					</view>
				</view>
				<!-- 提交订单 -->
				<view class="flex bg-white " style="height: 120rpx">
					<view class="flex align-center justify-end pr-10 w-100 shadow">
						<text class="font">应付总金额：<text class="h2"
								:class="'text-'+ThemeColors">{{Goods.Amount * Quantity}}.00</text>元</text>
					</view>
					<view @click="handleSubmit" class="flex-shrink  flex align-center justify-center"
						:class="'bg-'+ThemeColors" style="cursor: pointer; height: 100%; width: 400rpx;">
						<text class="font-md text-white">提交订单</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show  v-if="screenWidth>480" :screenWidth="screenWidth" :bg="'bg-white'"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import times from '@/static/js/utils.js'
	import { CityData } from "../../static/js/city.js";
	const {Address} = CityData();
	import { Message } from 'element-ui'
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	import { GroupCheckStockAction,setGroupTransactionAction } from '@/api/group.js'
	import { getAddAction } from '@/api/global.js'
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				loading: true,
				Data: {},
				ThemeColors: app.globalData.ThemeColors,
				Domain_IMG: app.globalData.Domain_IMG,
				address: '',
				addressDetail: '',
				Address: Address(),
				Quantity: 0,
				Goods: {},
				options: [],
				form: {
					Group_Transaction_SerialNumber: "", //主键
					Group_Purchasing_SerialNumber: "", //流水号
					Quantity: "", //总量
					Amount: "", //钱
					Submission_Time: "", //时间
					Shipment_SerialNumber: "",
					Transport_SerialNumber: "",
					Payment_SerialNumber: "",
					Buyer_Contact: "", //买主姓名
					Buyer_Contact_Phone: "", //买主手机号
					Buyer_Contact_Address: "", //买主地址
					Buyer_Enterprise_Info_SerialNumber: "", //买主公司编号
					Enterprise_Info_SerialNumber: "", //卖家公司编号
					Children: {
						group_transaction_paystages: [{
							Group_Paystages_SerialNumber: "",
							Group_Transaction_SerialNumber: "",
							Trading_Name: "",
							Trading_Amount: "",
							Trading_Date: "",
							Amount: 100,
							Collection_Amount: 0
						}]
					}
				},
				textarea2: ''
			}
		},
		onLoad(e) {
			this.form.Buyer_Contact_Phone = uni.getStorageSync('loginInfo').use
			this.form.Buyer_Contact = uni.getStorageSync('loginInfo').username
			this.Goods = JSON.parse(decodeURIComponent(e.Goods))
			this.Data = JSON.parse(decodeURIComponent(e.data))
			this.Quantity = e.num
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url
				})
			},
			//检查商品库存
			async CheckStock(data) {
				const res = await GroupCheckStockAction({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
					this.form.Submission_Time = times.nowtime()
					this.form.Buyer_Enterprise_Info_SerialNumber = uni.getStorageSync('loginInfo').enterprise
					this.form.Enterprise_Info_SerialNumber = this.Goods.Enterprise_Info_SerialNumber
					this.form.Group_Purchasing_SerialNumber = this.Goods.Group_Purchasing_SerialNumber
					this.form.Quantity = this.Quantity
					this.form.Amount = this.Goods.Amount
					if (this.Goods.Trading_Name == '按阶段付款') {
						this.form.Children.group_transaction_paystages = this.Data.Paystages
						this.form.Children.group_transaction_paystages.forEach(item => {
							item.Group_Paystages_SerialNumber = ''
							item.Group_Transaction_SerialNumber = ''
							item.Amount = item.Trading_Amount * this.Goods.Amount * this.Quantity / 100,
								item.Collection_Amount = 0,
								item.Collection_Date = ''
						})
					} else {
						this.form.Children.group_transaction_paystages = [{
							Amount: this.Goods.Amount * this.Quantity,
							Collection_Amount: 0,
							Group_Paystages_SerialNumber: '',
							Group_Transaction_SerialNumber: '',
							Trading_Detail_SerialNumber: this.Data.Paystages[0].Trading_Detail_SerialNumber,
							Trading_Amount: 100,
							Trading_Date: this.Data.Paystages[0].Trading_Date,
							Trading_Explain: "全额支付",
							Collection_Date: "",
						}]
					}
					let data = {
						Data: JSON.stringify({
							"group_transaction": [this.form]
						}),
					}
					this.GetAdd(data)
				} else {
					this.loading = true
					Message({
						message: '该商品库存不足!无法提交',
						type: 'error'
					})
					uni.hideLoading()
				}
			},
			//提交商品订单
			async GetAdd(data) {
				const res = await setGroupTransactionAction({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res)
					let group_message_buyer = {
						Group_Message_SerialNumber: "",
						Group_Transaction_SerialNumber: res.Data,
						Cause: "提交成功",
						Submission_Time: times.nowtime(),
						Enterprise_Info_SerialNumber: uni.getStorageSync('loginInfo').enterprise,
						Seller_Type: "0"
					}
					let group_message_seller = {
						Group_Message_SerialNumber: "",
						Group_Transaction_SerialNumber: res.Data,
						Cause: "申请提示",
						Submission_Time: times.nowtime(),
						Enterprise_Info_SerialNumber: this.form.Enterprise_Info_SerialNumber,
						Seller_Type: "1"
					}
					let group_message = []
					group_message.push(group_message_buyer)
					group_message.push(group_message_seller)
					let data = {
						Data: JSON.stringify({
							"group_message": group_message
						}),
						token: uni.getStorageSync('loginInfo').token,
					}
					this.submitMessage(data)
				} else {
					Message({
						message: '系统异常请稍后重试',
						type: 'error'
					})
					uni.hideLoading()
					this.loading = true
				}
			},
			//给交易双方发消息
			async submitMessage(data) {
				const res = await getAddAction({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
					uni.hideLoading()
					Message({
						message: '提交成功!,等待对方审核中',
						type: 'success'
					})
					this.loading = true
					uni.navigateBack()
				} else {
					Message({
						message: '系统异常,请稍后重试',
						type: 'error'
					})
					uni.hideLoading()
					this.loading = true
				}
			},
			//表单验证
			handleSubmit() {
				if (this.form.Buyer_Contact.trim() == '') {
					Message({
						message: '请填写收货人姓名',
						type: 'error'
					})
					return
				}
				if (this.form.Buyer_Contact_Phone.trim() == '') {
					Message({
						message: '请填写收货人手机号',
						type: 'error'
					})
					return
				}
				const reg = /^1[3-9]\d{9}$/
				if (!reg.test(this.form.Buyer_Contact_Phone)) {
					Message({
						message: '请检查手机号格式',
						type: 'error'
					})
					return
				}
				if (this.address.length == 0) {
					Message({
						message: '请选择地址',
						type: 'error'
					})
					return
				}
				if (this.addressDetail.trim() == '') {
					Message({
						message: '请输入详情地址',
						type: 'error'
					})
					return
				}
				if (this.form.Payment_SerialNumber == '') {
					Message({
						message: '请选择打款方式',
						type: 'error'
					})
					return
				}
				if (this.form.Shipment_SerialNumber == '') {
					Message({
						message: '请选择装运方式',
						type: 'error'
					})
					return
				}
				if (this.form.Transport_SerialNumber == '') {
					Message({
						message: '请选择运输方式',
						type: 'error'
					})
					return
				}
				this.form.Buyer_Contact_Address = this.address[0] + '/' + this.address[1] + '/' + this.address[2] + '/' +
					this.addressDetail
				const this_ = this
				uni.showModal({
					title: '平台通知',
					content: '平台会收取交易双方各1%交易额度的手续费',
					cancelText: "我再想想",
					success(res) {
						if (res.cancel) {
							Message({
								message: '已取消',
								type: 'warning'
							})
						}
						if (res.confirm) {
							if (this_.loading) {
								console.log()
								this_.loading = false
								let data = {
									Group_Purchasing_SerialNumber: this_.Goods.Group_Purchasing_SerialNumber,
									Quantity: this_.Quantity,
									token: uni.getStorageSync('loginInfo').token,
								}
								uni.showLoading({
									title: '提交中...',
								})
								this_.CheckStock(data)
							}
						}
					}
				})

				// uni.navigateTo({
				// 	url:'/pages/order/supply-order-detail?type=supply'
				// })
			}
		}
	}
</script>

<style>
	.box {
		border-top-width: 5rpx;
		border-top-style: solid;
		box-sizing: border-box;
	}
</style>